import { HTMLAttributes } from 'react'

type SvgWithColor = {
  className?: string
} & HTMLAttributes<SVGElement>

export const ArrowBack = ({ className, ...props }: SvgWithColor) => {
  return (
    <svg
      className={className}
      fill={'none'}
      height={'16'}
      viewBox={'0 0 16 16'}
      width={'16'}
      xmlns={'http://www.w3.org/2000/svg'}
      {...props}
    >
      <g clipPath={'url(#clip0_52363_1990)'}>
        <path
          className={className}
          d={
            'M12.6667 7.33333H4.76008L7.18008 4.42667C7.29324 4.29052 7.34768 4.115 7.33143 3.93872C7.31518 3.76243 7.22956 3.59983 7.09341 3.48667C6.95727 3.37351 6.78175 3.31907 6.60547 3.33532C6.42918 3.35157 6.26657 3.43719 6.15341 3.57333L2.82008 7.57333C2.79766 7.60515 2.7776 7.63857 2.76008 7.67333C2.76008 7.70667 2.76008 7.72667 2.71341 7.76C2.6832 7.83644 2.66738 7.91781 2.66675 8C2.66738 8.08219 2.6832 8.16356 2.71341 8.24C2.71341 8.27333 2.71341 8.29333 2.76008 8.32667C2.7776 8.36143 2.79766 8.39485 2.82008 8.42667L6.15341 12.4267C6.2161 12.5019 6.29459 12.5624 6.38331 12.6039C6.47203 12.6454 6.56881 12.6668 6.66675 12.6667C6.82252 12.667 6.97347 12.6127 7.09341 12.5133C7.16092 12.4574 7.21672 12.3886 7.25762 12.3111C7.29852 12.2335 7.32372 12.1486 7.33177 12.0613C7.33982 11.974 7.33057 11.8859 7.30454 11.8022C7.27851 11.7185 7.23622 11.6407 7.18008 11.5733L4.76008 8.66667H12.6667C12.8436 8.66667 13.0131 8.59643 13.1382 8.4714C13.2632 8.34638 13.3334 8.17681 13.3334 8C13.3334 7.82319 13.2632 7.65362 13.1382 7.5286C13.0131 7.40357 12.8436 7.33333 12.6667 7.33333Z'
          }
          fill={'currentColor'}
        />
      </g>
      <defs>
        <clipPath id={'clip0_52363_1990'}>
          <rect height={'16'} width={'16'} />
        </clipPath>
      </defs>
    </svg>
  )
}
